<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<style type="text/css">

    .search-body td {
        font-size: 14px;
        font-family: 宋体;
        padding: 7px;
        border: 0;
        position: relative;
    }

    #msgNoticeConfigModal {
        width: 880px;
        margin-left: -440px;
    }

    .add-customer-body label {
        display: inline-block;
    }

    .add-customer-body {
        max-height: 470px;
    }

     .msg-container *{margin: 0; padding: 0; list-style: none;}
    .msg-container input[type='checkbox'],.msg-container input[type='radio']{margin: 0 5px 0 0;}
    .msg-container .border-bottom{border-bottom: 1px solid #757575;}
    .msg-container .flex-a-center{display: flex; align-items: center;}
    .msg-container .flex-j-center{display: flex; justify-content: center;}

    .msg-container .red-star-label{display: block; width: 150px; position: relative;}
    .msg-container .red-star-label::after{display: block; content: '*'; color: red; position: absolute; left: -10px; top: 2px;}

    .msg-container > section{padding-left: 10px;}

    .msg-container .section-item-1{height: 40px;}
    .msg-container .section-item-1 li label{display: flex; align-items: center; margin-right: 50px;}

    .msg-container .section-item-2{display: flex;}
    .msg-container .section-item-2 .red-star-label{margin-top: 15px;}
    .msg-container .section-item-2 ul{display: flex; flex-wrap: wrap; flex: 1;}
    .msg-container .section-item-2 ul li{width: 33.3333%; height: 50px; display: flex; align-items: center;}

    .msg-container .section-item-3{display: flex;}
    .msg-container .section-item-3 .red-star-label{margin-top: 15px;}
    .msg-container .section-item-3 .right-box{flex: 1;}
    .msg-container .section-item-3 .tab-item{height: 45px;}
    .msg-container .section-item-3 .tab-item li{margin-right: 30px;}
    .msg-container .section-item-3 .tab-item label{display: flex; align-items: center;}

    .msg-container .date-frame > li{display: none; min-height: 175px;}
    .msg-container .date-frame > li.active{display: block;}
    .msg-container .date-frame > li > ul{display: flex; flex-wrap: wrap;}
    .msg-container .date-frame > li > ul > li{width: 50%; display: flex; align-items: center; margin-bottom: 20px;}
    .msg-container .date-frame > li > ul > li input[type='text']{width: 100px; margin: 0; background: url("media/rms-images/icon-dateIcon.png") 89px center no-repeat;}
    .msg-container .date-frame > li > ul > li input:first-of-type{margin: 0 5px;}
    .msg-container .date-frame > li > ul > li input:last-of-type{margin-left: 5px;}

</style>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <ul class="breadcrumb">
                <li><span class="c-999">消息管理
				<i class="icon-angle-right"></i></span>
                </li>
                <li><a class="c-666" onclick="util.showContent('pages/message/msgNoticeConfig.jsp')">消息通知</a></li>
            </ul>
        </div>
    </div>

    <div class="search-box">
        <div class="search-title">
            <span class="search-criteria c-666">&nbsp;查询条件</span>
        </div>
        <div class="search-body">
            <form>
                <table style="width:800px;">
                    <tr>
                        <td>
                            <span class="al-right">用户名：</span>
                            <input id="name" class="search-input" type="text"/>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
        <ul class="search-button">
            <li>
                <button class="btn blue" id="queryMsgNoticeConfigButton">查&nbsp;&nbsp;询</button>
            </li>
            <li>
                <button class="btn blue reset" >重&nbsp;&nbsp;置</button>
            </li>
        </ul>
    </div>
    <div id="logBox">
        <div class="table-con" >
            <div class="table-head">
                &nbsp;&nbsp;&nbsp;<i class="icon-reorder"></i>&nbsp;列表详情
            </div>
            <div class="list-body">
                <div class="portlet-body">
                    <p>
                        <button id="msgNoticeConfigEdit" class="btn green">
                            编&nbsp;&nbsp;辑
                        </button>
                    </p>
                </div>
                <div class="table-responsive">
                    <table class="table table-striped table-hover table-bordered"
                           id="msgNoticeConfigTable" style="width: 99.9%;">
                        <thead>
                        <tr>
                            <th class="sorting_asc_disabled" style="width:8px;"><input
                                    type="checkbox" class="group-checkable"
                                    data-set="#msgNoticeConfigTable .checkboxes"/>
                            </th>
                            <th class="fourMinWidth">用户</th>
                            <th class="fourMinWidth">站内消息</th>
                            <th class="fourMinWidth">短信</th>
                            <th class="fourMinWidth">邮件</th>
                            <th class="fourMinWidth">接收告警类型</th>
                            <th class="fourMinWidth">接收时间</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div id="msgNoticeConfigModal" class="modal hide fade" tabindex="-1" data-focus-on="input:first">
        <div class="modal-header add-customer-header bg-green c-bold c-fff" >
            消息接收设置
        </div>
        <div class="modal-body add-customer-body" style="max-height: 470px !important;">
            <div class="msg-container">
                <input type="hidden" name="receiver" >
                <section class="border-bottom section-item-1 flex-a-center" id="receiveType">
                    <label>接受方式：</label>
                    <ul class="flex-a-center">
                        <li><label><input type="checkbox" name="showMessage">站内消息</label></li>
                        <li><label><input type="checkbox" name="sendSmsFlag">短信</label></li>
                        <li><label><input type="checkbox" name="sendEmailFlag">邮件</label></li>
                    </ul>
                </section>

                <section class="border-bottom section-item-2" id="noticeAlertType">
                    <label class="red-star-label">接收告警类型：</label>
                    <ul>
                        <li><label><input type="checkbox" name="alertCode" value="W001">W001高温报警</label></li>
                        <li><label><input type="checkbox" name="alertCode" value="W002">W002放电过流报警</label></li>
                        <li><label><input type="checkbox" name="alertCode" value="W003">W003充电过流报警</label></li>
                        <li><label><input type="checkbox" name="alertCode" value="W004">W004单体过压报警</label></li>
                        <li><label><input type="checkbox" name="alertCode" value="W005">W005SOC过低报警</label></li>
                        <li><label><input type="checkbox" name="alertCode" value="W006">W006单体欠压报警</label></li>
                        <li><label><input type="checkbox" name="alertCode" value="W007">W007通信生命</label></li>
                        <li><label><input type="checkbox" name="alertCode" value="W008">W008子网通网故障</label></li>
                        <li><label><input type="checkbox" name="alertCode" value="W009">W009MU通信报警</label></li>
                    </ul>
                </section>

                <section class="section-item-3">
                    <label class="red-star-label">短信、邮件接收时间：</label>
                    <div class="right-box">
                        <ul class="tab-item flex-a-center">
                            <li><label><input type="radio" name="noticeTime" value="1">7*24小时</label></li>
                            <li><label><input type="radio" name="noticeTime" value="2">仅工作日</label></li>
                            <li><label><input type="radio" name="noticeTime" value="3">仅周末</label></li>
                            <li><label><input type="radio" name="noticeTime" value="4">自定义</label></li>
                        </ul>

                        <ul class="date-frame">
                            <!--7*24-->
                            <li class="active"></li>
                            <!--仅工作日-->
                            <li id="weekday">
                                <ul>
                                    <li class="monday">
                                        <label>周一</label>
                                        <input type="text" class="form-date-hour start-time" onclick="WdatePicker({dateFmt:'HH:mm'})">~<input type="text" class="form-date-hour end-time" onclick="WdatePicker({dateFmt:'HH:mm'})">
                                    </li>
                                    <li class="tuesday">
                                        <label>周二</label>
                                        <input type="text" class="form-date-hour start-time" onclick="WdatePicker({dateFmt:'HH:mm'})">~<input type="text" class="form-date-hour end-time" onclick="WdatePicker({dateFmt:'HH:mm'})">
                                    </li>
                                    <li class="wednesday">
                                        <label>周三</label>
                                        <input type="text" class="form-date-hour start-time" onclick="WdatePicker({dateFmt:'HH:mm'})">~<input type="text" class="form-date-hour end-time" onclick="WdatePicker({dateFmt:'HH:mm'})">
                                    </li>
                                    <li class="thursday">
                                        <label>周四</label>
                                        <input type="text" class="form-date-hour start-time" onclick="WdatePicker({dateFmt:'HH:mm'})">~<input type="text" class="form-date-hour end-time" onclick="WdatePicker({dateFmt:'HH:mm'})">
                                    </li>
                                    <li class="friday">
                                        <label>周五</label>
                                        <input type="text" class="form-date-hour start-time" onclick="WdatePicker({dateFmt:'HH:mm'})">~<input type="text" class="form-date-hour end-time" onclick="WdatePicker({dateFmt:'HH:mm'})">
                                    </li>
                                </ul>
                            </li>
                            <!--仅周末-->
                            <li id="weekend">
                                <ul>
                                    <li class="saturday">
                                        <label>周六</label>
                                        <input type="text" class="form-date-hour start-time" onclick="WdatePicker({dateFmt:'HH:mm'})">~<input type="text" class="form-date-hour end-time" onclick="WdatePicker({dateFmt:'HH:mm'})">
                                    </li>
                                    <li class="sunday">
                                        <label>周日</label>
                                        <input type="text" class="form-date-hour start-time" onclick="WdatePicker({dateFmt:'HH:mm'})">~<input type="text" class="form-date-hour end-time" onclick="WdatePicker({dateFmt:'HH:mm'})">
                                    </li>
                                </ul>
                            </li>
                            <!--自定义-->
                            <li id="custom">
                                <ul>
                                    <li class="monday">
                                        <label>周一</label>
                                        <input type="text" class="form-date-hour start-time" onclick="WdatePicker({dateFmt:'HH:mm'})">~<input type="text" class="form-date-hour end-time" onclick="WdatePicker({dateFmt:'HH:mm'})">
                                    </li>
                                    <li class="tuesday">
                                        <label>周二</label>
                                        <input type="text" class="form-date-hour start-time" onclick="WdatePicker({dateFmt:'HH:mm'})">~<input type="text" class="form-date-hour end-time" onclick="WdatePicker({dateFmt:'HH:mm'})">
                                    </li>
                                    <li class="wednesday">
                                        <label>周三</label>
                                        <input type="text" class="form-date-hour start-time" onclick="WdatePicker({dateFmt:'HH:mm'})">~<input type="text" class="form-date-hour end-time" onclick="WdatePicker({dateFmt:'HH:mm'})">
                                    </li>
                                    <li class="thursday">
                                        <label>周四</label>
                                        <input type="text" class="form-date-hour start-time" onclick="WdatePicker({dateFmt:'HH:mm'})">~<input type="text" class="form-date-hour end-time" onclick="WdatePicker({dateFmt:'HH:mm'})">
                                    </li>
                                    <li class="friday">
                                        <label>周五</label>
                                        <input type="text" class="form-date-hour start-time" onclick="WdatePicker({dateFmt:'HH:mm'})">~<input type="text" class="form-date-hour end-time" onclick="WdatePicker({dateFmt:'HH:mm'})">
                                    </li>
                                    <li class="saturday">
                                        <label>周六</label>
                                        <input type="text" class="form-date-hour start-time" onclick="WdatePicker({dateFmt:'HH:mm'})">~<input type="text" class="form-date-hour end-time" onclick="WdatePicker({dateFmt:'HH:mm'})">
                                    </li>
                                    <li class="sunday">
                                        <label>周日</label>
                                        <input type="text" class="form-date-hour start-time" onclick="WdatePicker({dateFmt:'HH:mm'})">~<input type="text" class="form-date-hour end-time" onclick="WdatePicker({dateFmt:'HH:mm'})">
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </section>
                <p id="infoBox" class="info-box hide" style="text-align: center; color: red;">提示信息：……</p>
            </div>
        </div>
        <div class="modal-footer al-center bg-fff">
            <button type="button" class="btn green" style="margin-right: 25px;" id="msgNoticeConfigSave">保存
            </button>
            <button type="button" data-dismiss="modal" class="btn red" id="form_btn_close">取消
            </button>
        </div>
    </div>


</div>



<!-- 查看详情 end -->
<!-- 模态窗口 str -->

<script type="text/javascript" src="pages/message/js/msgNoticeConfig.js"></script>

<script src="media/js/ui-modals.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function () {
        msgNoticeConfigTable.init();
        UIModals.init();
    });
</script>

